import type { IButtonStyles } from '../../interfaces'
import { ThemeVarService } from '../../../lib/abstract/style/theme_var/service'
import { SYMBOLS } from '../../interfaces'

export const DEFAULT_BUTTON_STYLE = `
all: unset;
display: inline-flex;
align-items: center !important;
justify-content: center !important;
padding: 8px 16px !important;
margin: 1em 0 !important;
border: none !important;
outline: none !important;
border-radius: 5px !important;
font-size: 14px !important;
font-weight: 500 !important;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap !important;
height: 20px !important;

&[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
`

/**
 * 按钮样式定义
 */
export const BUTTON_STYLES: IButtonStyles = {
  info: {
    className: 'btn-info',
    base: `
      background-color: #3085d6 !important;
      color: #ffffff !important;
    `,
    hover: `
      background-color: #1a73c8 !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    `,
  },
  primary: {
    className: 'btn-primary',
    base: `
      background-color: #3085d6 !important;
      color: #ffffff !important;
    `,
    hover: `
      background-color: #1a73c8 !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    `,
  },
  secondary: {
    className: 'btn-outline-secondary',
    base: `
      background-color: #6c757d !important;
      color: #ffffff !important;
    `,
    hover: `
      background-color: #5a6268 !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    `,
  },
  success: {
    className: 'btn-success',
    base: `
      background-color: #28a745 !important;
      border-color: #28a745 !important;
      color: #ffffff !important;
    `,
  },
  danger: {
    className: 'btn-danger',
    base: `
      background-color: #dc3545 !important;
      border-color: #dc3545 !important;
      color: #ffffff !important;
    `,
    hover: `background-color: #c82333 !important;`,
  },
  warning: {
    className: 'btn-warning',
    base: `
      background-color: #ffc107 !important;
      border-color: #ffc107 !important;
      color: #212529 !important;
      animation: pulseWarning 1s infinite;
    `,
  },
  resetStyle: {
    className: 'btn-reset-style',
    base: `
      color: #fff !important;
      background-color: #6f42c1 !important;
      border-color: #6f42c1 !important;
      transition: all 0.2s ease;
    `,
    hover: `
      background-color: #5a32a3 !important;
      border-color: #4d2d8a !important;
    `,
    active: `
      background-color: #4d2d8a !important;
      box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.3) !important;
    `,
  },

  resetInput: {
    className: 'btn-reset-input',
    base: `
      color: #fff !important;
      background-color: #fd7e14 !important;
      border-color: #fd7e14 !important;
      transition: all 0.2s ease;
    `,
    hover: `
      background-color: #e36209 !important;
      border-color: #d15706 !important;
    `,
    active: `
      background-color: #d15706 !important;
      box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.3) !important;
    `,
  },
}

export const BUTTON_TEMPLATE = {
  download: (id: string, content: string) => `
    <button id="${id}" class="btn ${BUTTON_STYLES.info.className} download-btn">
      <span class="icon-download"></span> ${content}
    </button>
    `,
}

export const BUTTON_TEMPLATE_STYLES = {
  download: `
.download-btn {
  margin-left: auto !important;
  
  .icon-download {
    margin-right: 6px;
    font-size: 14px;
    
    &::before {
      content: "${SYMBOLS.ARROWS.DOWN}";
    }
  }
}
`,
  close: `
.btn-close {
  background: none;
  border: 1px solid var(${ThemeVarService.getInstance().default.border.colorNeutral});
  border-radius: 2px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  color: var(${ThemeVarService.getInstance().default.text.secondary}) !important;

  &:hover {
    color: var(${ThemeVarService.getInstance().message.danger.textPrimary}) !important;
  }
}
`,
  closeHover: `
  all: initial; /* 清除所有继承样式 */
  position: absolute !important;
  right: 5px !important;
  top: 3px !important;
  cursor: pointer !important;
  font-size: 10px !important;
  color: var(${ThemeVarService.getInstance().default.text.secondary}) !important;
  z-index: 999 !important;
  
  &:hover {
    color: var(${ThemeVarService.getInstance().message.danger.textPrimary}) !important;
    font-weight: bold;
  }
  `,
}

export class ButtonStyleHelper {
  /**
   * 生成完整的按钮样式CSS
   */
  static generateButtonStyles(): string {
    let styles = ''

    Object.values(BUTTON_STYLES).forEach((style) => {
      styles += `
        .btn.${style.className} {
          ${DEFAULT_BUTTON_STYLE}
          ${style.base}
        }
        ${style.hover ? `.btn.${style.className}:hover { ${style.hover} }` : ''}
        ${style.active ? `.btn.${style.className}:active { ${style.active} }` : ''}
        ${style.focus ? `.btn.${style.className}:focus { ${style.focus} }` : ''}
        ${style.disabled ? `.btn.${style.className}:disabled { ${style.disabled} }` : ''}
      `
    })

    return styles
  }

  /**
   * 获取按钮类名
   * @param type 按钮类型
   */
  static getButtonClass(type: keyof typeof BUTTON_STYLES): string {
    return `btn ${BUTTON_STYLES[type].className}`
  }
}
